<!--
 * @Author: lihaogn
 * @Date: 2021-09-29 00:36:27
 * @LastEditTime: 2021-09-29 11:37:30
 * @LastEditor: lihaogn
 * @Description: 表格宽度样式探究
 * @FilePath: \lix-management-platform\src\views\experiment\styleTest\TableWidth.vue
-->
<template>
  <div>
    <h3>情况一：td 的宽度和小于 table 的宽度</h3>
    <p>
      <strong>示例1：</strong><br />
      Table 的宽度为 600px，Table 的 td 所有宽度总和不到 600px。<br />
      <span class="mind-text"
        >这种情况浏览器会自动按照 td 的宽度的比例算出宽度。</span
      >
    </p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 200px;">设置为200px</td>
        <td style="width: 200px;">设置为200px</td>
      </tr>
    </table>

    <br />

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 200px;">设置为200px</td>
        <td style="width: 100px;">设置为100px</td>
      </tr>
    </table>

    <p>
      <strong>示例2：</strong><br />
      三个 td 的和小于 table 的宽度。<br />
      Table 的宽度为 600px，td1 为 250px，td2 为 250px，td3 为 50px。<br />
      <span class="mind-text"
        >这种情况下，会优先根据内容计算宽度，剩余的宽度按比例计算。</span
      ><br />
      50px不够文字的长度，所以被撑开，实际宽度为81px，然后前两个宽度按比例被重新计算出来。
    </p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 60px;">设置为 50px</td>
      </tr>
    </table>

    <p class="mind-text">
      90px可以容纳文字的长度，所以这三个的宽度会按比例重新计算。
    </p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 90px;">设置为 90px</td>
        <td style="width: 250px;">设置为 250px</td>
      </tr>
    </table>

    <p>
      <strong>示例3：</strong> <span class="recommend-text">推荐使用</span>
      <br />
      前两个 td 的宽度和小于 table 的宽度，第三个 td 不设置宽度。<br />
      Table 的宽度为 600px，td1 为 250px，td2 为 250px。<br />
      <span class="mind-text"
        >这种情况下，前两个 td 的宽度不变，第三个 td 的宽度为剩余的宽度。</span
      >
    </p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td>不设置宽度</td>
      </tr>
    </table>

    <p class="mind-text">
      优先设置给定的宽度，然后剩下的宽度给没有设置宽度的 td。
    </p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td>不设置宽度</td>
        <td style="width: 250px;">设置为 250px</td>
      </tr>
    </table>

    <p>
      <strong>示例4：使用了 table-layout: fixed;</strong><br />
      前两个 td 的宽度和小于 table 的宽度，三个 td 的和小于 table
      的宽度。但添加了 table-layout: fixed;<br />
      Table 的宽度为 600px，td1 为 250px，td2 为 250px，td3 为 50px。<br />
      <span class="mind-text"
        >这种情况下，宽度是按比例重新计算出来的。但是如果三个 td 的和大于 table
        的宽度，那么结果就如情况二的示例3所示。</span
      >
    </p>
    <table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 50px;">设置为 50px</td>
      </tr>
    </table>

    <!-- ------------------------------------------------------------------------------- -->
    <h3>情况二：td 的宽度和大于 table 的宽度</h3>
    <p>
      <strong>示例1：</strong><br />
      三个 td 的和大于 table 的宽度。<br />
      Table 的宽度为 600px，td1 为 250px，td2 为 250px，td3 为 200px。<br />
      <span class="mind-text">这种情况会按比例重新计算宽度。</span>
    </p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 200px;">设置为 200px</td>
      </tr>
    </table>

    <p>
      <strong>示例2：</strong><br />
      前两个 td 的宽度和大于 table 的宽度，第三个 td 不设置宽度。<br />
      Table 的宽度为 600px，td1 为 310px，td2 为 310px。<br />
      <span class="mind-text"
        >这种情况下，会把没设置宽度的 td 的宽度减掉后再按比例重新计算其他两个 td
        的宽度。</span
      >
    </p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 310px;">设置为 310px</td>
        <td style="width: 310px;">设置为 310px</td>
        <td>不设置宽度</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 310px;">设置为 310px</td>
        <td>不设置宽度</td>
        <td style="width: 310px;">设置为 310px</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 310px;">设置为 310px</td>
        <td>不设置宽度</td>
        <td style="width: 620px;">设置为 620px</td>
      </tr>
    </table>

    <p>
      <strong>示例3：使用了 table-layout: fixed;</strong><br />
      三个 td 的和大于 table 的宽度。但添加了 table-layout: fixed;<br />
      Table 的宽度为 600px，td1 为 250px，td2 为 250px，td3 为 150px。<br />
      <span class="mind-text"
        >这种情况下，每个 td 的宽度为设置的宽度，table的总宽度为三个 td
        的总宽度（当然还包括边框）。</span
      >
    </p>
    <table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 150px;">设置为 150px</td>
      </tr>
    </table>

    <!-- ------------------------------------------------------------------------------- -->
    <h3>情况三：固定值和百分比混用</h3>
    <p>
      <strong>示例1：</strong><br />
      <br />
      Table 的宽度为 600px，td1 为 250px，td2 td3 设为 50%。<br />
      <span class="mind-text"
        >table 宽度够的情况下，先按百分比计算宽度，剩下的分配给其他。</span
      >
    </p>

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">
          <span>设置为250px</span>
        </td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 30%;">设置为 30%</td>
      </tr>
    </table>

    <p class="mind-text">table 宽度不够的情况下，搞不懂是怎么分配的。</p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">
          <span>设置为250px</span>
        </td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">
          <span>设置为250px</span>
        </td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 80%;">设置为 80%</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">
          <span>设置为250px</span>
        </td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 80%;">设置为 80%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">
          <span>设置为250px</span>
        </td>
        <td style="width: 80%;">设置为 80%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">
          <span>设置为250px</span>
        </td>
        <td style="width: 80%;">设置为 80%</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">
          <span>设置为250px</span>
        </td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 45%;">设置为 45%</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">
          <span>设置为250px</span>
        </td>
        <td style="width: 20%;">设置为 20%</td>
        <td style="width: 30%;">设置为 30%</td>
        <td style="width: 45%;">设置为 45%</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 250px;">
          <span>设置为250px</span>
        </td>
        <td style="width: 45%;">设置为 45%</td>
      </tr>
    </table>

    <p>
      <strong>示例2：</strong><br />
      <br />
      Table 的宽度为 600px，td1 为 250px，td2 为 250px，td3 为 50%。<br />
      <span class="mind-text"
        >这种情况下，会先计算百分比，然后剩下的宽度会按比例重新计算。</span
      >
    </p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 310px;">设置为 310px</td>
        <td style="width: 310px;">设置为 310px</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 150px;">设置为 150px</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <p>
      <strong>示例3：</strong><br />
      <br />
      Table 的宽度为 600px，td1 为 50%，td2 为 50%，td3 为 60%。<br />
      <span class="mind-text"
        >都设置为百分比，比例超过100%的情况，不知道是怎么分配宽度的。。。。</span
      >
    </p>
    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 60%;">设置为 60%</td>
      </tr>
    </table>

    <br />

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 60%;">设置为 60%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 60%;">设置为 60%</td>
        <td style="width: 40%;">设置为 40%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 40%;">设置为 40%</td>
        <td style="width: 60%;">设置为 60%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 40%;">设置为 40%</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 60%;">设置为 60%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 30%;">设置为 30%</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 60%;">设置为 60%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 30%;">设置为 30%</td>
        <td style="width: 60%;">设置为 60%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <br />

    <table style="width: 600px;border-collapse: collapse;">
      <tr>
        <td style="width: 20%;">设置为 20%</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 60%;">设置为 60%</td>
        <td style="width: 50%;">设置为 50%</td>
      </tr>
    </table>

    <p>
      <strong>示例4：使用了 table-layout: fixed;</strong><br />
      <br />
      Table 的宽度为 600px，td1 为 250px，td2 为 50%，td3 为 40%。<br />
      <span class="mind-text"
        >这种情况下，会先将固定值减去，然后剩下的部分会按比例重新计算宽度。</span
      >
    </p>
    <table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 40%;">设置为 40%</td>
      </tr>
    </table>

    <p>这种情况下，样式就乱了。</p>
    <table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
      <tr>
        <td style="width: 610px;">设置为 610px</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 40%;">设置为 40%</td>
      </tr>
    </table>

    <p>
      <strong>示例5：使用了 table-layout: fixed;</strong><br />
      <br />
      Table 的宽度为 600px，td1 为 250px，td2 为 50%，td3 为 60%。<br />
      <span class="mind-text"
        >这种情况下，会先将固定值减去，然后剩下的部分会按比例重新计算宽度。</span
      >
    </p>
    <table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 60%;">设置为 60%</td>
      </tr>
    </table>

    <br />
    <table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
      <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 100%;">设置为 100%</td>
      </tr>
    </table>

    <p>
      <strong>示例6：使用了 table-layout: fixed;</strong><br />
      <br />
      Table 的宽度为 600px，td1 td2 为 50%，td3 为 60%。<br />
      <span class="mind-text">这种情况会按比例重新计算宽度。</span>
    </p>
    <table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
      <tr>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 50%;">设置为 50%</td>
        <td style="width: 60%;">设置为 60%</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
table,
th,
td {
  border: 1px solid black;
  padding: 0;
  // 不换行
  white-space: nowrap;
}

.mind-text {
  text-decoration: underline wavy red;
}

.recommend-text {
  color: red;
  font-weight: bold;
  background-color: yellowgreen;
}
</style>
